<template>
  <a-card>
    <!-- 高级查询组件 -->
    <m-e-s-super-query
      :fieldList='queryObj'
      :saveCode='fileName'
      @ok='handleSuperQuery'
    ></m-e-s-super-query>
    <a-divider style="margin-top: 60px" />
    <a-row>
      <a-col :lg='4'>
        <div style="overflow-y: scroll;height: 520px;margin-top: 0%">
          <a-tree
            defaultExpandAll
            :show-line="showLine"
            :treeData="categoryTree"
            :defaultExpandAll="false"
            :expandedKeys = "expandedKeys"
            @select="onSelect"
            @expand="onExpand">
            <template slot='title'  slot-scope="{label, value}">
              <span @click='getMaterialByCategory(value)'>{{label}}</span>
            </template>
          </a-tree>
        </div>
      </a-col>
      <a-col  :lg='18'>
        <v-table
          :toolbar='true'
          bordered
          ref='table'
          :data='loadData'
          :tableColumn='tableColumns'
        >
          <template v-slot:buttons>
            <a-button @click='addData' icon='plus' type='primary'>新建</a-button>
            <a-button @click='showModal' icon='download' type='plain' style='margin-left: 12px'>导入向导</a-button>
            <a-button @click='exportDataList' icon='download' type='plain' style='margin-left: 12px'>导出</a-button>
          </template>
          <template v-slot:action='{ text, row }'>
        <span>
          <a href='javascript:' @click='showData(row)'>查看</a>
        </span>
            <span>
          <a-divider type='vertical' />
          <a href='javascript:' @click='editData(row)'>编辑</a>
        </span>
            <span>
          <a-divider type='vertical' />
          <a-popconfirm title='是否删除' @confirm='deleteItem(row)' okText='是' cancelText='否'>
            <a-icon slot='icon' type='question-circle-o' style='color: red' />
            <a href='javascript:' style='color: red'>删除</a>
          </a-popconfirm>
        </span>
          </template>
        </v-table>
      </a-col>
    </a-row>
    <!-- form表单 -->
    <modal-form
      @ok='queryPage'
      ref='modalForm'
      :defaultCategory=this.category
    />
    <!-- 导入 -->
    <b-import-file
      @ok='queryPage'
      :actionUrl='actionUrl'
      :des='des' ref='BImportFile'
      @download='download' />
  </a-card>
</template>

<script>
  import { TableMixin } from '@/mixins/TableMixin'
  import { queryObj,tableColumns ,MaterialsData} from './materialsBaseTemplate'
  import { superPageFetchList,delObj ,downloadExcelCandidate,exportData,getMaterialsCategory,getSupplierCode} from '@api/base/materialsBase'
  import MESSuperQuery from '@comp/MesWSuperQuery/MesWSuperQuery'
  import modalForm from './MaterialsAddOrUpdate'
  import {dropDownByCode} from '@/api/sys/sys'
  import BImportFile from '@comp/BImportFile/BImportFile'
  export default {
    name: 'materialsList',
    mixins: [TableMixin],
    components: {
      MESSuperQuery,
      BImportFile,
      modalForm
    },
    data() {
      return {
        // 导入接口
        actionUrl: '/baseMaterials/importExcel',
        des: ' <h3>说明</h3>\n' +
          '      <h4>请下载导入模板，填写完成后导入</h4>',

        queryObj,
        tableColumns,
        MaterialsData,
        fileName: '',
        //warehouseTypes: [],
        loadData: parameter => {
          return superPageFetchList(
            Object.assign(parameter, this.queryParam,{category:this.category})
          ).then(res => {
            //console.log('res.data',res.data)
            this.MaterialsData = res.data.records;
            const t = []
            console.log("unit",this.unit)
            this.MaterialsData.forEach(item => {
              t.push(item.baseMaterials)
            })
            res.data.records = t;
            //console.log('res.data',res.data)
            return res.data;
          })
        },

        //左侧列表
        showLine:true,
        categoryTree:[],
        //展开指定的树节点
        expandedKeys:[],
        category:''
      }
    },
    mounted() {

    },
    async created() {
      this.confirmLoading = true
      this.getTreeList()
    },
    methods: {

      getMaterialByCategory(value){
        if (this.category === value){
          this.category = ''
        }else {
          this.category = value;
        }
        this.queryPage()
      },

      handleSuperQuery(params) {
        this.queryParam.queryType = params.queryType
        this.queryParam.queryItems = encodeURI(JSON.stringify(params.queryItems))
        this.queryPage()
      },
      // 删除
      deleteItem(record) {
        delObj(record.id).then(() => {
          this.$message.info('删除成功')
          this.queryPage()
        })
      },
      //下载导入模板
      download() {
        downloadExcelCandidate().then(res => {
          const blbo = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(blbo)
          link.download =  '材料设备导入模板.xlsx'
          link.click()
        }).catch((e) => {
          this.$message.warning('下载失败')
        })
      },
      //导出表格
      exportDataList() {
        exportData(this.queryParam).then(res => {
          //创建二进制数据对象
          const blbo = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })
          //创建a标签
          const link = document.createElement('a')
          //创建一个指向二进制文件的URL
          link.href = window.URL.createObjectURL(blbo)
          link.download = '材料设备导出信息.xlsx'
          link.click()
        })
      },

      //左侧列表
      onSelect(selectedKeys, info) {
        this.selectedKeys = selectedKeys;
        this.$parent.matId = selectedKeys;
        // this.$emit("mdmSelect",selectedKeys)
      },
      onExpand(a,b){
        if(a.length > 0){
          if(b.expanded){
            // 展开节点
            this.expandedKeys = a
          }else{
            // 关闭节点
            this.expandedKeys = this.expandedKeys.filter(item => a.indexOf(item) > -1)
          }
        }else {
          this.expandedKeys = []
        }
        this.expandedKeys = this.arrFilter(this.expandedKeys)
      },
      closeFresh() {
        this.getTreeList()
      },
      getTreeList(treeType) {
        if (null != treeType){
          this.queryParam.catType = treeType;
        }
        // alert(this.queryParam.catType);
        let param = {
          param: ''
        }
        getMaterialsCategory().then((res) => {
          if (res.code == 0) {
            this.categoryTree = res.data;
            // this.mdmMatTree.map((item)=>{
            //   this.expendAll(item)
            // })
            this.confirmLoading = false
          } else {
            this.$message.warning('获取材料类别树失败')
            this.confirmLoading = false
          }
        })
      },
      // expendAll(obj){
      //   if (obj.children && obj.children.length > 0) {
      //     this.expandedKeys.push(obj.key)
      //     for (let a = 0; a < obj.children.length; a++) {
      //       this.expendAll(obj.children[a])
      //     }
      //   }
      // },
      arrFilter(array) {
        let temp = []; //一个新的临时数组
        for(let i = 0; i < array.length; i++){
          if(temp.indexOf(array[i]) === -1){
            temp.push(array[i]);
          }
        }
        return temp;
      }
    }
  }
</script>

<style scoped>

</style>